<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- <script type="text/javascript" src="js/header.js"></script> -->
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/booking.css">
    <title>系统主页</title>
</head>
<body>
    <div id="header" class="headerpage"></div>
    <div style="text-align: center;" id="title">
        <p>火车购票系统</p>
        <p>Welcome</p>
    </div>
   
    <form action="" id="indexForm">
        <table class="table" style="margin: 0 50px;">
        </table>
    </form>
    
    <div id="tips">
        <p>
            
        </p>
    </div>
    <script>

        let ids = new Array();


        $.ajax({
            url:"booking",
            type:"get",
            success:function(data){
                data = JSON.parse(data);
                var table = $("table");
                var lis ='<tr id="table_header" style="text-align: center;font-size: xx-large;"><td colspan="6">车票详情列表</td></tr>';
                lis = lis +'<tr>' 
                if(data.code == 200) {
                    var obj = data.data;
                    if (obj.length == 0) {
                        table.html('<h4 style="text-align: center;font-size: x-large;color: red;  ">火车停运,请选择其他出行方式</h4>');
                        return;
                    }
                    for (var i = 0 ; i < obj.length ; i++) {
                        ids[i] = obj[i].id;
                        lis += '<td rowspan="2" id="id'+i+'">' + obj[i].id + '</td> ';
                        lis += '<td><img src="images/start.png" alt="" id="start"></td>';
                        lis += '<td>' + obj[i].start + '</td>';
                        lis += '<td>' + obj[i].start_time + '</td>';
                        lis += '<td rowspan="2">$'+ obj[i].price+'</td>';
                        if (obj[i].count <= 0) {
                            lis += '<td rowspan="2">剩余票数 '+ '售罄' +'</td>'; 
                        }else {
                            lis += '<td rowspan="2">剩余票数 '+ obj[i].count +'</td>';
                        }
                        
                        lis += '<td rowspan="2"><input type="button" value="取消该车次" onclick="concele('+i+')"></td>';
                        lis += '</tr>';
                        lis += '<tr><td><img src="images/end.png" alt=""></td>';
                        lis += '<td>' + obj[i].end + '</td>';
                        lis += '<td>' + obj[i].end_time + '</td>';
                        lis += '</tr>';
                    }
           
                    table.html(lis);
                }
            }
        });

        function concele(i) {

            $.ajax({
                url:'trip',
                type:'post',
                data:{
                    id:ids[i]
                },
                success: function(data) {
                    data = JSON.parse(data);
                    alert(data.code);
                    if(data.code == 200) {
                        alert("取消成功");
                        location.href = 'booking.html';
                    }else {
                        alert("取消失败");
                    }
                }

            }) 
        }

    </script>
        <script>
            $(".headerpage").load("admitHeader.html")
        </script>


</body>
</html>
